<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公告管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>服务管理</cite></a>
			<a><cite>公告列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form class="layui-form x-center" action="" style="width: 800px">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<label class="layui-form-label">日期范围</label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
					</div>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
					</div>
					<div class="layui-input-inline">
						<input type="text" name="username" placeholder="标题"
							id="anno_title" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" lay-submit="" lay-filter="sreach"
							type="button" onclick="announcement_search()">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>
			</div>
		</form>
		<xblock>
		<button class="layui-btn"
			onclick="activity_add('公告添加','announcementadd.jsp','1000','600')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>

		<script type="text/javascript"
			src="${pageContext.request.contextPath}/back/js/jquery.js"></script>
		<script>
			let pageNum = 1;
			let pageSize = 2;

			/*公告表查询*/
			announcement_search();
			function announcement_search() {
				pageSize = $("#layui-laypage-2 select").val();

				if (pageSize == null) {
					pageSize = 2;
				}

				$
						.ajax({
							async : true,
							type : "get",
							url : "${pageContext.request.contextPath}/AnnouncementServlet",
							data : {
								op : "announcementSearch",
								annoTitle : $("#anno_title").val(),
								startDate : $("#LAY_demorange_s").val(),
								endDate : $("#LAY_demorange_e").val(),
								pageNum : pageNum,
								pageSize : pageSize
							},
							contentType : "application/x-www-form-urlencoded",
							dataType : "json",
							success : function(result, status, xhr) {
								let num = 0;
								let content = "";

								if (result.data != null) {
									$.each(result.data.list,function(index, obj) {
														content += "<tr><td>"
																+ obj.annoTitle
																+ "</td><td>"
																+ obj.annoTime
																+ "</td><td>"
																+ obj.annoContent
																+ "</td>"
																+ "<td class=\"td-manage\"><a title=\"编辑\" href=\"javascript:;\" onclick=\"activity_edit('编辑','activityedit.jsp?annoNo="
																+ obj.annoNo
																+ "','1000','600')\" class=\"ml-5\" style=\"text-decoration: none\">"
																+ "<i class=\"layui-icon\">&#xe642;</i></a></td>"
																+ "</tr>";
														num++;
													});
									$("#announcement-content").html(content);
									$("#num").html(result.data.total);
								} else {
									$("#announcement-content").empty();
								}

								let pageContent = "";
								if (result.data != null) {
									if (result.data.pageNum == 1) {
										pageContent = "<span class\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></span>";
									} else {
										pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
												+ (result.data.pageNum - 1)
												+ "\"><i class=\"layui-icon\">上一页</i></a>";
									}

									for (let i = 1; i <= result.data.pages; i++) {
										if (i == result.data.pageNum) {
											pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
													+ i + "</em></span>";
										} else {
											pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
													+ i + "</a>";
										}
									}

									if (result.data.pageNum == result.data.pages) {
										pageContent += "<span class=\"layui-laypage-next layui-disabled\" data-page=\""
												+ (result.data.pageNum + 1)
												+ "\"><i class=\"layui-icon\">下一页</i></span>";
									} else {
										pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
												+ (result.data.pageNum + 1)
												+ "\"><i class=\"layui-icon\">下一页</i></a>"
									}

									//拼接页码输入框
									pageContent += "<span class=\"layui-laypage-skip\" style=\"display:inline-block\">到第<input style=\"display:inline-block\" type=\"text\" min=\"1\" max=\""
											+ (result.data.pages)
											+ "\" value=\"1\" class=\"layui-input\">页<button type=\"button\""+
										         "class=\"layui-laypage-btn\" style=\"display:inline-block\">确定</button></span>";
									//拼接总条数
									pageContent += "<span class=\"layui-laypage-count\">共"
											+ result.data.total + "条</span>";

									//拼接下拉框
									pageContent += "<span class=\"layui-laypage-limits\">"
											+ "<select lay-ignore=\"\">"
											+ "<option value=\"2\" >2条/页</option>"
											+ "<option value=\"5\">5 条/页</option>"
											+ "<option value=\"10\">10 条/页</option>"
											+ "</select></span>";

									$("#layui-laypage-2").html(pageContent);

									$("#layui-laypage-2 select option")
											.each(
													function() {
														if ($(this).val() == result.data.pageSize) {
															$(this).prop(
																	"selected",
																	"selected");
														}
													});
								} else {
									pageContent = "查无数据";
									$("#layui-laypage-2").html(pageContent);
								}
							},
							error : function(xhr, status, error) {
							}
						});
			}

			$("body").on("click", "#layui-laypage-2 a", function() {
				pageNum = $(this).data("page");
				announcement_search();
				pageNum = 1;
			});
		</script> <span class="x-right" style="line-height: 40px">共有数据：<span
			class="layui-badge" id="num">0</span> 条
		</span></xblock>

		<table class="layui-table">
			<thead>
				<tr>

					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody id="announcement-content">
				<tr>
					<td><input type="checkbox" value="1" name=""></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td class="td-manage"><a title="编辑" href="javascript:;"
						onclick="activity_edit('编辑','activity_add.html','1000','600')"
						class="ml-5" style="text-decoration: none"> <i
							class="layui-icon">&#xe642;</i>
					</a></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="layui-card-body ">
		<div class="page">
			<div class="layui-table-page">
				<div id="layui-table-page1">
					<div class="layui-box layui-laypage layui-laypage-default"
						id="layui-laypage-2">
						<a href=" " class="layui-laypage-prev layui-disabled"
							data-page="0"><i class="layui-icon"></i> </a> <span
							class="layui-laypage-curr"> <em class="layui-laypage-em"></em><em>1</em>
						</span> <a href="javascript:;" data-page="2">2</a> <a href="javascript:;"
							data-page="3">3</a> <span class="layui-laypage-spr">…</span> <a
							href="javascript:;" class="layui-laypage-last" title="尾页"
							data-page="100">100</a> <a href="javascript:;"
							class="layui-laypage-next" data-page="2"><i
							class="layui-icon"> </i> </a> <span class="layui-laypage-skip"
							style="display: inline-block">到第<input type="text" min="1"
							value="1" class="layui-input">页
							<button type="button" class="layui-laypage-btn">确定</button>
						</span> <span class="layui-laypage-count" style="display: inline-block">共
							1000 条</span> <span class="layui-laypage-limits"
							style="display: inline-block"> <select lay-ignore="">
								<option value="10" selected="">10 条/页</option>
								<option value="20">20 条/页</option>
								<option value="30">30 条/页</option>
								<option value="40">40 条/页</option>
								<option value="50">50 条/页</option>
								<option value="60">60 条/页</option>
								<option value="70">70 条/页</option>
								<option value="80">80 条/页</option>
								<option value="90">90 条/页</option>
						</select>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'laydate', 'element', 'laypage', 'layer' ], function() {
			$ = layui.jquery;//jquery
			laydate = layui.laydate;//日期插件
			lement = layui.element();//面包导航
			laypage = layui.laypage;//分页
			layer = layui.layer;//弹出层
			okLoading.close($);
			//以上模块根据需要引入

			var start = {
				min : '',
				max : '2099-06-16 23:59:59',
				istoday : false,
				choose : function(datas) {
					end.min = datas; //开始日选好后，重置结束日的最小日期
					end.start = datas //将结束日的初始值设定为开始日
				}
			};

			var end = {
				min : '',
				max : '2099-06-16 23:59:59',
				istoday : false,
				choose : function(datas) {
					start.max = datas; //结束日选好后，重置开始日的最大日期
				}
			};

			document.getElementById('LAY_demorange_s').onclick = function() {
				start.elem = this;
				laydate(start);
			}
			document.getElementById('LAY_demorange_e').onclick = function() {
				end.elem = this
				laydate(end);
			}
		});

		//批量删除提交
		function delAll() {
			layer.confirm('确认要删除吗？', function(index) {
				//捉到所有被选中的，发异步进行删除
				layer.msg('删除成功', {
					icon : 1
				});
			});
		}

		function question_show(argument) {
			layer.msg('可以跳到前台具体问题页面', {
				icon : 1,
				time : 1000
			});
		}
		/*添加*/
		function activity_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		//编辑
		function activity_edit(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}

		/*删除*/
		function activity_del(obj, id) {
			layer.confirm('确认要删除吗？', {
				icon : 3,
				title : '提示信息'
			}, function(index) {
				$.ajax({
					type : "post",
					url : "xxx",
					data : {
						id : id
					},
					dataType : "json",
					success : function(data) {
						//console.log(data);
						if (data.status == 1) {
							//发异步删除数据
							$(obj).parents("tr").remove();
							layer.msg(data.info, {
								icon : 6,
								time : 1000
							});
							setTimeout(function() {
								window.location.reload();
							}, 1000);
							return false;
						} else {
							layer.msg(data.info, {
								icon : 5,
								time : 1000
							});
							return false;
						}
					}
				});
				//发异步删除数据
				$(obj).parents("tr").remove();
				layer.msg('已删除!', {
					icon : 1,
					time : 1000
				});
			});
		}
	</script>

</body>
</html>